<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程评价系统 - 教师</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white">
        <div class="container">
            <a class="navbar-brand" href="#">课程评价系统</a>
            <div class="d-flex align-items-center">
                <span class="me-3" id="userName"></span>
                <button class="btn btn-outline-danger btn-sm" onclick="utils.logout()">退出</button>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="container my-4">
        <!-- 统计卡片 -->
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="card stat-card">
                    <div class="card-body">
                        <h6 class="card-subtitle mb-2 text-muted">课程总数</h6>
                        <h2 class="card-title" id="totalClasses">0</h2>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card stat-card">
                    <div class="card-body">
                        <h6 class="card-subtitle mb-2 text-muted">评价总数</h6>
                        <h2 class="card-title" id="totalEvaluations">0</h2>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card stat-card">
                    <div class="card-body">
                        <h6 class="card-subtitle mb-2 text-muted">平均评分</h6>
                        <h2 class="card-title" id="averageScore">0.0</h2>
                    </div>
                </div>
            </div>
        </div>

        <!-- 评分分布图表 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title mb-4">评分分布</h5>
                        <canvas id="scoreChart" style="max-height: 300px;"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- 课程列表 -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title mb-4">我的课程</h5>
                        <div id="classMessage" class="alert alert-danger d-none"></div>
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>班级编号</th>
                                        <th>课程名称</th>
                                        <th>学期</th>
                                        <th>时间地点</th>
                                        <th>学生人数</th>
                                        <th>评价数量</th>
                                        <th>平均评分</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="classList"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 评价详情模态框 -->
    <div class="modal fade" id="evaluationModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="evaluationModalTitle">评价详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div id="evaluationMessage" class="alert alert-danger d-none"></div>
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>学号</th>
                                    <th>姓名</th>
                                    <th>评分</th>
                                    <th>评价内容</th>
                                    <th>评价时间</th>
                                </tr>
                            </thead>
                            <tbody id="evaluationList"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    <script src="../js/config.js"></script>
    <script src="../js/teacher.js"></script>
</body>
</html> 